<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Metfind</title>
	<LINK href="<?php echo base_url();?>/assets/css/home.css" rel="stylesheet" type="text/css"/>
	<LINK href="<?php echo base_url();?>/assets/css/style.css" rel="stylesheet" type="text/css"/>
	     <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>/assets/css/imagemontage/demo.css" />
		<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>/assets/css/imagemontage/style.css" />
		<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
		<link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css' />
	
	<script src="<?php echo base_url();?>/assets/js/jquery182.js"></script>
		<script type="text/javascript" src="<?php echo base_url();?>/assets/js/jquery.montage.min.js"></script>
	<script src="http://www.google.com/jsapi" type="text/javascript"></script>
	
	<script type="text/javascript">

		/********************CONFIG AND INITIALIZE MAP **************************/
		google.load("maps", "3",  {other_params:"sensor=true"});
		var map;
		var INPHMARKERLIST=[];
		var FAPLMARKERLIST=[];
		var FAEVMARKERLIST=[];
		
		var RADIUSLIMITRIGHT=5000;
		var RADIUSLIMITLEFT=100;
		var ZOOMLIMITLEFT=10;
		var ZOOMLIMITRIGHT=19;
		var MAXZOOM=21;
		
		var BASESIZE=45;
		var BASEZOOM=14;
		
	
		function initialize() 
		{
			$('#panel').toggle(
					function() {
						$(this).addClass('show').removeClass('hide');
						$('#overlay').stop().animate( { left : - $('#overlay').width() + 20 + 'px' }, 300 );
					},
					function() {
						$(this).addClass('hide').removeClass('show');
						$('#overlay').stop().animate( { left : '0px' }, 300 );
					}
				);
			$('#overlay').fadeIn(500);
			/*$('#map').hover(function() {
			    $("body").css("overflow","hidden");
			}, function() {
			     $("body").css("overflow","auto");
			});*/
			
			var zoom = 15;
			var lat="-33.022476";
		    var lng="-71.642502";
		    var latlng = new google.maps.LatLng(lat,lng);
		    var location = "Posicion default: Valparaiso (CL), U  Playa Ancha";
		    
			if (google.loader.ClientLocation) 
			{
				lat=google.loader.ClientLocation.latitude;
				lng=google.loader.ClientLocation.longitude;
				latlng = new google.maps.LatLng(lat,lng);
		    }

		    var myOptions = 
			{
		      zoom: zoom,
		      center: latlng,
		      mapTypeId: google.maps.MapTypeId.HYBRID
		    }
		    
		 	map = new google.maps.Map(document.getElementById("map"), myOptions);
		    google.maps.event.addListener(map, "click", 
			function (e) 
			{
		        $("#coords").html("Click in: ( "+ e.latLng.lat().toFixed(6) + " , " + e.latLng.lng().toFixed(6)+ " ) Zoom:  "+ map.getZoom()+" Search radius:"+getRadius());
			}); 

			google.maps.event.addListener(map, "dragend", 
			function () 
			{
				$("#coords").html("Map center in: ( "+map.getCenter().lat().toFixed(6)+" , "+map.getCenter().lng().toFixed(6)+" ) Zoom: "+map.getZoom()+ " Search radius:"+getRadius());
				if(map.getZoom()>=ZOOMLIMITLEFT)
				{	
	    			//AJAX_update_places_facebook(map.getCenter().lat().toFixed(6),map.getCenter().lng().toFixed(6),getRadius());
		    		AJAX_update_photos_instagram(map.getCenter().lat().toFixed(6),map.getCenter().lng().toFixed(6),getRadius());
				}
			});
			google.maps.event.addListener(map, 'zoom_changed', 
			function() 
			{
			 	for (i in INPHMARKERLIST) 
				{
			 		INPHMARKERLIST[i].icon.scaledSize=new google.maps.Size(getScaleIcon(),getScaleIcon());
			 		INPHMARKERLIST[i].icon.anchor= new google.maps.Point(getScaleIcon()/2,getScaleIcon()/2);
			 		INPHMARKERLIST[i].setMap(null);
			 		INPHMARKERLIST[i].setMap(map);	
			    }
			 	if(map.getZoom()>=ZOOMLIMITLEFT)
				{
	    			//AJAX_update_places_facebook(map.getCenter().lat().toFixed(6),map.getCenter().lng().toFixed(6),getRadius());
		    		AJAX_update_photos_instagram(map.getCenter().lat().toFixed(6),map.getCenter().lng().toFixed(6),getRadius());
				}
			 	$("#coords").html("Map center in: ( "+map.getCenter().lat().toFixed(6)+" , "+map.getCenter().lng().toFixed(6)+" ) Zoom: "+map.getZoom()+ " Search radius:"+getRadius());
				
			}); 


			$("#coords").html("Map center in: ( "+map.getCenter().lat().toFixed(6)+" , "+map.getCenter().lng().toFixed(6)+" ) Zoom: "+map.getZoom()+ " Search radius:"+getRadius());
			AJAX_update_photos_instagram(lat,lng,getRadius());
		}
		/*******************************END CONFIG AND INITIALIZE MAP**************************/

		
		/*********************************************INSTAGRAM**************************/
		function addMarkerPhotoInstagram(img)
		{	

			if(img.caption==null)
			{
				img.caption=[{text:"NO-CAPTION"}]
			}
			for (var i=0;i<INPHMARKERLIST.length;i++)
			{
				if(INPHMARKERLIST[i].link==img.link)
				{
					return;
				}
				if(INPHMARKERLIST[i].lat== img.location.latitude && INPHMARKERLIST[i].lng==img.location.longitude)
				{
				//	img.location.latitude=img.location.latitude+0.003277;
				}
			}
			if(img.images.thumbnail.url!=null)
				var icon=new google.maps.MarkerImage(img.images.thumbnail.url, new google.maps.Size(img.images.thumbnail.width, img.images.thumbnail.height), new google.maps.Point(0,0),  new google.maps.Point(getScaleIcon()/2,getScaleIcon()/2),new google.maps.Size(getScaleIcon(),getScaleIcon()));
			else
				var icon=new google.maps.MarkerImage(img.images.low_resolution.url, new google.maps.Size(img.images.low_resolution.width, img.images.low_resolution.height), new google.maps.Point(0,0),  new google.maps.Point(getScaleIcon()/2,getScaleIcon()/2),new google.maps.Size(getScaleIcon(),getScaleIcon()));
		
			var marker = new google.maps.Marker({
			    position: new google.maps.LatLng(img.location.latitude,img.location.longitude),
			    title:img.caption.text,
			    icon: icon,
			    animation: google.maps.Animation.DROP ,
			    link:img.link,
			    lat:img.location.latitude,
				lng:img.location.longitude
			});
			
			google.maps.event.addListener(marker, 'mouseover', 
			function() 
			{
	    		$("#photo").html("<img src='"+img.images.low_resolution.url+"'/>"
										+"<br>"+img.caption.text
										+"<br>( "+img.location.latitude+" , "+img.location.longitude+" )"
										);
	    	
		  	});
						
			INPHMARKERLIST.push(marker);
			marker.setMap(map);	
					
		}

		function AJAX_update_photos_instagram(lat,lng,ratio)
		{
			$.ajax({
	              url: "https://api.instagram.com/v1/media/search",
	              data: {lat: lat,lng:lng,distance:ratio,client_id:"7dd8a944bec345ee98f79bbab365294c",count:"100"
		             ,min_timestamp:"1351669800",max_timestamp:"1351756200"
		              },
	              dataType: "jsonp",
	              }).success(
        			function( rtndata ) 
        			{			
    	    			if(rtndata.data[0]==null)
        				{
    	    				$("#instagram").html("no result");
							return;
    	    			}
    	    			if(rtndata.data[0].caption==null)
    	    				rtndata.data[0].caption=[{text:"NO-CAPTION"}]


    	    				                         if(rtndata.data.length+$('.inphoto').size()>109)
    	    				 						{
    	    				 							var a=rtndata.data.length+$('.inphoto').size()-109;
    	    				 							
    	    				 							for(var i=0; i<a;i++)
    	    				 							$('.inphoto:last-child').remove();
    	    				 						}
    	    		//$("#instagram").html("");
    	    			$("#photo").html("<img src='"+rtndata.data[0].images.low_resolution.url+"'/>"
								+"<br>"+rtndata.data[0].caption.text
								+"<br>( "+rtndata.data[0].location.latitude+" , "+rtndata.data[0].location.longitude+" )");

    	    			for(var i=0;i<rtndata.data.length;i++)
    	  				{
    	    				addMarkerPhotoInstagram(rtndata.data[i]);



    	    				
    	  					$("#instagram").html($("#instagram").html()+"<a href='#container'><img alt='"+rtndata.data[i].caption.text+"'  class='inphoto' onclick=\"focusImage("+rtndata.data[i].location.latitude+","+rtndata.data[i].location.longitude+");\" src='"+rtndata.data[i].images.low_resolution.url+"'></img></a>");
    	  				} 
    	    							
    				});  		  			 
		}

		function focusImage(lat,lng)
		{
			map.setCenter(new google.maps.LatLng(lat,lng));
			map.setZoom(MAXZOOM);
		}
		function getScaleIcon()
		{
			var scale=(map.getZoom()*BASESIZE/(BASEZOOM-ZOOMLIMITLEFT))-(BASESIZE*ZOOMLIMITLEFT)/(BASEZOOM-ZOOMLIMITLEFT);
			if(scale<=0)
				scale=2;
			return scale;
		}
		
		function getRadius()
		{
			var radius= Math.round((map.getZoom()*((RADIUSLIMITRIGHT-RADIUSLIMITLEFT)/(ZOOMLIMITLEFT-ZOOMLIMITRIGHT)))+(RADIUSLIMITRIGHT)-ZOOMLIMITLEFT*((RADIUSLIMITRIGHT-RADIUSLIMITLEFT)/(ZOOMLIMITLEFT-ZOOMLIMITRIGHT)));
			if(radius<RADIUSLIMITLEFT)radius=RADIUSLIMITLEFT;
			if(radius>RADIUSLIMITRIGHT)radius=RADIUSLIMITRIGHT;
			return radius;
			
		}

		function searchAddress()
		{
			var address = document.getElementById("address").value;
			var geocoder= new google.maps.Geocoder();
			geocoder.geocode( { 'address': address}, function(results, status) {
		      if (status == google.maps.GeocoderStatus.OK) {
		       map.setCenter(results[0].geometry.location);
				map.setZoom(14);
		        AJAX_update_photos_instagram(results[0].geometry.location.lat(),results[0].geometry.location.lng(),Math.round(RADIUSLIMITRIGHT/map.getZoom()));
		        
		      } else {
		        alert("Geocode was not successful for the following reason: " + status);
		      }
		    });			
		}
		/**************************END INSTAGRAM**********************************/
		
		/******************************FACEBOOK***********************************/
		
		function addMarkerPlaceFacebook(latlng,title)
		{	
			for (var i=0;i<FAEVMARKERLIST.length;i++)
			{
				if(FAEVMARKERLIST[i].position==latlng||FAEVMARKERLIST[i].title==name)
					return;
			}
			var marker = new google.maps.Marker({
			    position: latlng,
			    title:title,
			});

			marker.setMap(map);	
			FAEVMARKERLIST.push(marker);		
		}
		function AJAX_update_places_facebook(lat,lng,ratio)
		{
			$.ajax({
	    			type: "POST",
	    			dataType: 'json',
	    		  	url: "<?php echo base_url();?>/activitymap/AJAX_update_places_facebook",
	    		 	data: { lat: lat, lng:lng ,ratio:ratio}
	    			}).success(
	        			function( msg ) 
	        			{
	    	  				for(var i=0;i<msg.length;i++)
	    	  				{
	    	  					addMarkerPlaceFacebook(new google.maps.LatLng(msg[i].latitude,msg[i].longitude),msg[i].name);
	    	  				}
	    	  				
	    				});		 
		}
		function addMarkerPlaceFacebook(latlng,name)
		{	
			for (var i=0;i<INPHMARKERLIST.length;i++)
			{
				if(INPHMARKERLIST[i].position==latlng||INPHMARKERLIST[i].title==name)
					return;
			}
			var marker = new google.maps.Marker({
			    position: latlng,
			    title:name,
			});

			marker.setMap(map);	
			FAPLMARKERLIST.push(marker);		
		}
		function AJAX_update_events_facebook()
		{
			$.ajax({
	    			type: "POST",
	    			dataType: 'json',
	    		  	url: "<?php echo base_url();?>/activitymap/AJAX_update_events_facebook",
	    			}).success(
	        			function( msg ) 
	        			{
	        				for(var i=0;i<msg.length;i++)
	    	  				{
		    	  				if(msg[i].venue.latitude!=null && msg[i].venue.latitude !='undefined')
	    	  						addMarkerPlaceFacebook(new google.maps.LatLng(msg[i].venue.latitude,msg[i].venue.longitude),msg[i].name);
	    	  				}
	    				});		 
		}
		/**********************************END FACEBOOK*************************************/
		

		 

	
	</script>
	<style>

		

		
	</style>
</head>

<body onload="initialize()">
    
   
    	<div id="container">
    	<div id="overlay" class="content" style="">
				<div class="inner">
				
				<div id="map"></div>
					<input  id="address" type="text" value="Cancun"/><span style="cursor:pointer"><input type="button" onclick="searchAddress();" value = "search"/></span>
    		
					<h1 style="text-align:center">Metfind<span>Halloween 2012 </span></h1>
					<h5 style="text-align:left">Quieres conocer como se vivio halloween cerca de ti?</h5>
					<span style="color:green;font-size:20px;">Arrastra el mapa y ve lo que sucedio en tu ciudad </span>
					<h5 style="text-align:left">te gustaria ver como se vivio en el resto del mundo ?</h5>
					<span style="color:green;font-size:20px;">Visita New York, Ciudad de mexico, Barcelona o CUALQUIER LUGAR! </span>
					<h5 style="text-align:left">Pronto podras revivir todo tipo de eventos,darte a conocer, <br></>compartir lugares y saber lo que ocurre en cualquier parte</h5>
					<span style="color:green;font-size:20px;">Pronto esto y mas en www.metfind.com </span>

					<div class="snippet">
	

					</div>
					
					<div class="clr"></div>
					<div id="panel" class="panel hide"></div>
				</div>
			</div>
    	
    		<!--  <div id="coords"></div>
    		<input id="address" type="text" value="vaticano"/><input type="button" onclick="searchAddress();" value = "search"/><input type="button" onclick="AJAX_update_events_facebook();" value = "face"/>
    		
	    	
	    	<div id="photo"></div>
	    				<div id="facebook" ></div>
	    	-->

	    	<div id="instagram" class="instagram"></div>
    	</div>
    	

</body>
</html>